<template>
  <div>
    <el-container style="height: 900px; border: 1px solid #eee">
      <el-main>
        <el-table
            :data="tableData"
            style="width: 100%;"
            max-height="1000px">
          <el-table-column
              fixed
              prop="userName"
              label="用户名"
              width="150">
          </el-table-column>
          <el-table-column
              prop="realName"
              label="姓名"
              width="120">
          </el-table-column>
          <el-table-column
              prop="tel"
              label="电话号码"
              width="120">
          </el-table-column>
          <el-table-column
              prop="email"
              label="邮箱"
              width="200">
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="120">
            <template slot-scope="scope">
              <el-button
                  @click.native.prevent="deleteRow(scope.$index, tableData)"
                  type="text"
                  size="small">
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            background
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="total"
            :current-page="page"
            :page-size="size">
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import axios from "axios";

export default {
  methods: {
    queryByPage(page, size) {
      const that = this;
      let config = {
        method: 'post',
        url: `http://localhost:8080/user/queryAll?page=${page}&size=${size}`,
        headers: {
          "token": sessionStorage.getItem("token")
        }
      };

      axios(config)
          .then(function (response) {
            that.tableData = response.data.data;
            that.total = response.data.count;
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
      this.$mount();
    },
    handleCurrentChange(val) {
      this.queryByPage(val, this.size)
    }
  },
  data() {
    return {
      tableData: [],
      total: 0,//总共多少数据
      page: 1,//第几页
      size: 10//每页大小
    }
  },
  mounted() {
    const that = this;
    let config = {
      method: 'post',
      url: `http://localhost:8080/user/queryAll?page=${this.page}&size=${this.size}`,
      headers: {
        "token": sessionStorage.getItem("token")
      }
    };

    axios(config)
        .then(function (response) {
          if (response.data.msg == "NOT_LOGIN") {
            console.log("未登录")
            that.$router.push("/login")
            return;
          }
          that.tableData = response.data.data;
          that.total = response.data.count;
        })
        .catch(function (error) {
          console.log(error);
        });
  }
}
</script>
<style>

</style>